<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input class="search-input" type="text" v-model="searchKeyword" placeholder="搜索规则内容" @confirm="handleSearch" />
				<text v-if="searchKeyword" class="clear-btn" @click="clearSearch">✕</text>
				<text class="search-btn" @click="handleSearch">搜索</text>
			</view>
		</view>
		
		<!-- 搜索结果提示 -->
		<view class="search-result-tip" v-if="showSearchResults && searchKeyword">
			<text>搜索结果：{{searchKeyword}}</text>
			<text class="back-btn" @click="clearSearch">返回全部</text>
		</view>
		
		<!-- 页面标题 -->
		<view class="page-title">
			<text class="title-text">规则学习</text>
			<text class="subtitle-text">专业裁判规则知识库</text>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view scroll-y class="scroll-view" :scroll-top="scrollTop">
			<!-- 分类选择 -->
			<scroll-view scroll-x class="category-scroll">
				<view class="category-list">
					<view 
						class="category-item" 
						v-for="(item, index) in ruleCategories" 
						:key="index"
						:class="{active: currentRuleCategory === index}"
						@click="switchRuleCategory(index)"
					>
						<text>{{item}}</text>
					</view>
				</view>
			</scroll-view>
			
			<!-- 规则列表 -->
			<view class="rule-list">
				<view class="rule-item" 
					  v-for="(item, index) in ruleList" 
					  :key="index" 
					  @click="openRuleDetail(item)"
					  @longpress="startDrag(index)"
					  @touchmove="onTouchMove"
					  @touchend="onTouchEnd"
					  :class="{'is-dragging': dragIndex === index}"
					  :style="{ 
						  background: getCardGradient(item.subcategory),
						  transform: dragIndex === index ? `scale(1.05) translateY(${dragOffset}px)` : '',
						  zIndex: dragIndex === index ? 10 : 1,
						  transition: dragIndex === -1 ? 'transform 0.3s ease' : ''
					  }">
					<view class="rule-content">
						<view class="rule-icon">{{getCardIcon(item.subcategory)}}</view>
						<view class="rule-text">
							<text class="rule-title">{{item.subcategory || '未分类'}}</text>
							<view class="rule-meta">
								<text class="rule-count">{{item.rule_count}}条规则</text>
								<text class="rule-views">{{item.view_count}}次阅读</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="ruleList.length === 0" class="empty-tip">
					<text>{{isSearching ? '未找到相关规则内容' : '暂无规则内容'}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				ruleCategories: ['全部', '比赛规则', '规则修订', '简易版规则', '规则解释'],
				currentRuleCategory: 0,
				ruleList: [],
				// 拖拽相关变量
				dragIndex: -1, // 当前拖拽的项索引，-1表示未拖拽
				startY: 0, // 开始拖拽的Y坐标
				dragOffset: 0, // 拖拽偏移量
				scrollTop: 0, // 滚动位置
				isDragging: false, // 是否正在拖拽
				cardHeight: 0, // 卡片高度
				listChanged: false, // 列表是否被更改
				isSearching: false, // 是否正在搜索
				searchHistory: [], // 搜索历史
				showSearchResults: false, // 是否显示搜索结果提示
			}
		},
		onLoad() {
			// 获取规则列表
			this.getRuleList();
			
			// 读取搜索历史
			try {
				const history = uni.getStorageSync('study_search_history');
				if (history) {
					this.searchHistory = JSON.parse(history);
				}
			} catch (e) {
				console.error('读取搜索历史失败', e);
			}
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.refreshRuleList();
		},
		
		methods: {
			// 下拉刷新规则列表
			async refreshRuleList() {
				console.log('开始下拉刷新规则列表');
				
				// 重新获取规则列表
				const category = this.currentRuleCategory === 0 ? '' : this.ruleCategories[this.currentRuleCategory];
				
				try {
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.getRuleList({
						category,
						keyword: this.searchKeyword.trim(),
						limit: 100
					});
					
					if (res.code === 0) {
						this.processAndSetRuleList(res.data);
							uni.showToast({
								title: '刷新成功',
								icon: 'success',
								duration: 1500
							});
						} else {
							this.getMockRuleList();
							uni.showToast({
								title: '刷新完成',
								icon: 'none',
								duration: 1500
							});
						}
				} catch (err) {
						console.error('刷新规则列表失败', err);
						this.getMockRuleList();
						uni.showToast({
							title: '刷新失败',
							icon: 'none',
							duration: 1500
						});
				} finally {
						// 停止下拉刷新动画
						uni.stopPullDownRefresh();
					}
			},
			
			// 搜索处理
			handleSearch() {
				// 如果搜索关键词为空，则清除搜索状态
				if (!this.searchKeyword.trim()) {
					this.clearSearch();
					return;
				}
				
				// 设置搜索状态
				this.isSearching = true;
				this.showSearchResults = true;
				
				// 保存搜索历史
				this.saveSearchHistory(this.searchKeyword.trim());
				
				// 显示加载中
				uni.showLoading({
					title: '搜索中...'
				});
				
				// 执行规则搜索
				this.getRuleList();
			},
			
			// 保存搜索历史
			saveSearchHistory(keyword) {
				if (!keyword) return;
				
				// 如果已存在相同关键词，则删除旧记录
				const index = this.searchHistory.indexOf(keyword);
				if (index > -1) {
					this.searchHistory.splice(index, 1);
				}
				
				// 将新关键词添加到历史开头
				this.searchHistory.unshift(keyword);
				
				// 限制历史记录数量为10条
				if (this.searchHistory.length > 10) {
					this.searchHistory = this.searchHistory.slice(0, 10);
				}
				
				// 保存到本地存储
				try {
					uni.setStorageSync('study_search_history', JSON.stringify(this.searchHistory));
				} catch (e) {
					console.error('保存搜索历史失败', e);
				}
			},
			
			// 清除搜索
			clearSearch() {
				this.searchKeyword = '';
				this.isSearching = false;
				this.showSearchResults = false;
				
				// 重新获取全部数据
				this.getRuleList();
			},
			
			// 切换规则分类
			switchRuleCategory(index) {
				this.currentRuleCategory = index;
				this.getRuleList();
			},
			
			// 开始拖拽
			startDrag(index) {
				// 触发震动反馈
				uni.vibrateShort({
					success: () => {
						console.log('震动成功');
					}
				});
				
				// 记录开始拖拽的位置和索引
				this.dragIndex = index;
				
				// 获取当前卡片的大致高度（包括margin）
				// 实际应用中可能需要动态计算
				this.cardHeight = 130; // rpx单位，根据实际卡片高度调整
				
				// 阻止点击事件触发
				this.isDragging = true;
			},
			
			// 触摸移动处理
			onTouchMove(e) {
				if (this.dragIndex === -1) return;
				
				const touch = e.touches[0];
				if (!this.startY) {
					this.startY = touch.clientY;
				}
				
				// 计算拖拽偏移量
				this.dragOffset = touch.clientY - this.startY;
				
				// 计算可能的目标位置
				const targetIndex = Math.round(this.dragIndex + this.dragOffset / this.cardHeight);
				
				// 如果移动足够距离，交换位置
				if (targetIndex !== this.dragIndex && 
					targetIndex >= 0 && 
					targetIndex < this.ruleList.length) {
					
					// 交换列表中的项
					const item = this.ruleList.splice(this.dragIndex, 1)[0];
					this.ruleList.splice(targetIndex, 0, item);
					
					// 更新拖拽索引和起始位置
					this.dragIndex = targetIndex;
					this.startY = touch.clientY;
					this.dragOffset = 0;
					
					// 标记列表已更改
					this.listChanged = true;
				}
			},
			
			// 触摸结束处理
			onTouchEnd() {
				if (this.dragIndex !== -1) {
					// 重置拖拽状态
					this.dragIndex = -1;
					this.startY = 0;
					this.dragOffset = 0;
					
					// 如果列表已更改，保存顺序
					if (this.listChanged) {
						this.saveRuleOrder();
						this.listChanged = false;
					}
					
					// 延迟一段时间后允许点击，避免拖拽后立即触发点击
					setTimeout(() => {
						this.isDragging = false;
					}, 300);
				}
			},
			
			// 保存规则顺序
			saveRuleOrder() {
				// 获取当前分类
				const category = this.currentRuleCategory === 0 ? 'all' : this.ruleCategories[this.currentRuleCategory];
				
				// 构建排序数据
				const orderData = this.ruleList.map((item, index) => ({
					id: item._id || index,
					subcategory: item.subcategory,
					order: index
				}));
				
				// 保存到本地存储
				try {
					const key = `ruleOrder_${category}`;
					uni.setStorageSync(key, JSON.stringify(orderData));
					console.log('规则排序已保存', orderData);
					
					// 可选：同步到云端
					this.syncOrderToCloud(category, orderData);
				} catch (e) {
					console.error('保存规则排序失败', e);
				}
			},
			
			// 同步排序到云端（如需要）
			syncOrderToCloud(category, orderData) {
				// 示例：调用云函数保存排序
				// uniCloud.callFunction({
				//     name: 'saveRuleOrder',
				//     data: {
				//         category,
				//         orderData
				//     }
				// }).then(res => {
				//     console.log('排序同步到云端成功', res);
				// }).catch(err => {
				//     console.error('排序同步到云端失败', err);
				// });
			},
			
			// 处理并设置规则列表
			processAndSetRuleList(list) {
				if (!Array.isArray(list)) {
					console.error('规则列表数据格式错误');
					return;
				}
				
				// 1. 过滤掉无效数据
				const processedList = list.filter(item => item && item.category);
						
				// 2. 按 subcategory 分组并计算每组的规则数量
				const subcategoryMap = new Map();
				processedList.forEach(item => {
					// 使用 category-subcategory 组合作为分组键
					const key = `${item.category}-${item.subcategory || '未分类'}`;
					if (!subcategoryMap.has(key)) {
						subcategoryMap.set(key, {
							category: item.category, 
							subcategory: item.subcategory || '未分类',
							view_count: item.view_count || 0,
							rule_count: 1,
							create_date: item.create_date || new Date().toISOString(), // 使用最早的创建时间
							matchScore: item.matchScore || 0
						});
					} else {
						const existing = subcategoryMap.get(key);
						existing.rule_count = (existing.rule_count || 0) + 1;
						existing.view_count += (item.view_count || 0);
						
						// 保持最早的创建时间
						if (item.create_date && new Date(item.create_date) < new Date(existing.create_date)) {
							existing.create_date = item.create_date;
						}
						
						// 如果当前项目的匹配分数更高，则更新
						if ((item.matchScore || 0) > existing.matchScore) {
							existing.matchScore = item.matchScore;
						}
					}
				});
				
				// 3. 转换为数组并排序
				let groupedList = Array.from(subcategoryMap.values());
				
				// 4. 根据搜索状态决定排序方式
				if (this.isSearching) {
					// 搜索时按匹配分数排序
					groupedList.sort((a, b) => b.matchScore - a.matchScore);
				} else {
					// 非搜索时按照上传时间递增排序
					groupedList.sort((a, b) => {
						const dateA = new Date(a.create_date);
						const dateB = new Date(b.create_date);
						return dateA - dateB; // 时间越早排在前面
					});
				}
				
				// 5. 设置结果
				this.ruleList = groupedList;
				
				// 6. 隐藏加载提示
				uni.hideLoading();
			},

			// (辅助方法，用于 getMockRuleList 中获取原始数据，避免重复定义)
			getMockRuleListData() {
				return [
					{
						_id: '1',
						title: '足球比赛规则 - 规则一：球场',
						summary: '足球比赛规则第一条：球场的相关规定，包括场地表面、场地标记等内容',
						tags: ['球场', '场地标记', '基础规则'],
						view_count: 1250,
						language: 'zh-CN',
						category: '比赛规则',
						subcategory: '足球规则' // 示例二级标签
					},
					{
						_id: '2',
						title: '足球比赛规则 - 规则二：球',
						summary: '足球比赛规则第二条：球的相关规定，包括球的品质与规格、球的替换等内容',
						tags: ['足球', '基础规则'],
						view_count: 980,
						language: 'zh-CN',
						category: '比赛规则',
						subcategory: '足球规则' // 示例二级标签
					},
					{
						_id: '3',
						title: '足球比赛规则 - 规则三：队员',
						summary: '足球比赛规则第三条：队员的相关规定，包括队员人数、替换程序等内容',
						tags: ['队员', '替换', '基础规则'],
						view_count: 856,
						language: 'zh-CN',
						category: '比赛规则',
						subcategory: '篮球规则' // 示例二级标签
					},
					// 可以添加更多模拟数据，包括没有 subcategory 的情况
					{
						_id: '4',
						title: '裁判手势总览',
						summary: '各类比赛中裁判常用手势图解',
						tags: ['手势', '通用'],
						view_count: 750,
						language: 'zh-CN',
						category: '裁判技术',
						// tertiarycategory: '通用手势' // 假设没有 subcategory 但有 tertiarycategory
					}
				];
			},

			// 生成卡片渐变色
			getCardGradient(subcategory) {
				if (!subcategory) return 'linear-gradient(135deg, #1BAE76 0%, #0E8A5A 100%)'; // 默认渐变色
				
				// 使用简单的哈希算法基于subcategory字符串生成颜色
				let hash = 0;
				for (let i = 0; i < subcategory.length; i++) {
					hash = subcategory.charCodeAt(i) + ((hash << 5) - hash);
				}
				
				// 选择预定义的渐变色数组，使颜色更加美观和协调
				const gradients = [
					'linear-gradient(135deg, #1BAE76 0%, #0E8A5A 100%)', // 绿色渐变
					'linear-gradient(135deg, #4A90E2 0%, #2171B5 100%)', // 蓝色渐变
					'linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%)', // 紫色渐变
					'linear-gradient(135deg, #FF9800 0%, #F57C00 100%)', // 橙色渐变
					'linear-gradient(135deg, #F44336 0%, #D32F2F 100%)', // 红色渐变
					'linear-gradient(135deg, #009688 0%, #00695C 100%)', // 青绿色渐变
					'linear-gradient(135deg, #3F51B5 0%, #303F9F 100%)', // 靛蓝色渐变
					'linear-gradient(135deg, #FF5722 0%, #E64A19 100%)', // 深橙色渐变
					'linear-gradient(135deg, #8BC34A 0%, #689F38 100%)', // 浅绿色渐变
					'linear-gradient(135deg, #607D8B 0%, #455A64 100%)', // 蓝灰色渐变
					'linear-gradient(135deg, #E91E63 0%, #C2185B 100%)', // 粉色渐变
					'linear-gradient(135deg, #00BCD4 0%, #0097A7 100%)'  // 青色渐变
				];
				
				// 使用哈希值选择一个渐变色
				const gradientIndex = Math.abs(hash) % gradients.length;
				return gradients[gradientIndex];
			},
			
			// 根据二级分类获取合适的图标
			getCardIcon(subcategory) {
				if (!subcategory) return '📚';
				
				// 根据分类名称特征选择图标
				const categoryName = subcategory.toLowerCase();
				
				if (categoryName.includes('足球') || categoryName.includes('football')) return '⚽';
				if (categoryName.includes('篮球') || categoryName.includes('basketball')) return '🏀';
				if (categoryName.includes('排球') || categoryName.includes('volleyball')) return '🏐';
				if (categoryName.includes('网球') || categoryName.includes('tennis')) return '🎾';
				if (categoryName.includes('羽毛球') || categoryName.includes('badminton')) return '🏸';
				if (categoryName.includes('乒乓球') || categoryName.includes('ping')) return '🏓';
				if (categoryName.includes('游泳') || categoryName.includes('swimming')) return '🏊';
				if (categoryName.includes('田径') || categoryName.includes('track')) return '🏃';
				if (categoryName.includes('体操') || categoryName.includes('gymnastics')) return '🤸';
				if (categoryName.includes('武术') || categoryName.includes('martial')) return '🥋';
				if (categoryName.includes('裁判') || categoryName.includes('referee')) return '👨‍⚖️';
				if (categoryName.includes('规则') || categoryName.includes('rule')) return '📋';
				if (categoryName.includes('技术') || categoryName.includes('tech')) return '⚙️';
				if (categoryName.includes('管理') || categoryName.includes('manage')) return '📊';
				if (categoryName.includes('安全') || categoryName.includes('safety')) return '🛡️';
				if (categoryName.includes('训练') || categoryName.includes('training')) return '💪';
				
				// 默认图标
				return '📚';
			},

			// 获取规则列表
			async getRuleList() {
				uni.showLoading({
					title: this.isSearching ? '搜索中...' : '加载中...'
				});
				
				const category = this.currentRuleCategory === 0 ? '' : this.ruleCategories[this.currentRuleCategory];

				try {
					const learningService = uniCloud.importObject('learning-service');
					const res = await learningService.getRuleList({
						category,
						subcategory: '', // 在首页不限制二级分类
						keyword: this.searchKeyword.trim(),
						limit: 100
					});
					
					if (res.code === 0) {
						this.processAndSetRuleList(res.data);
						} else {
						this.getMockRuleList(); // 云对象失败或返回错误码，则使用模拟数据
						}
				} catch (err) {
						console.error('获取规则列表失败', err);
						this.getMockRuleList(); // 网络失败等，使用模拟数据
				} finally {
					uni.hideLoading();
					}
			},
			
			// 获取模拟规则列表
			getMockRuleList() {
				const mockRawData = this.getMockRuleListData();
				this.processAndSetRuleList(mockRawData);
			},
			
			// 打开规则详情
			openRuleDetail(item) {
				// 如果正在拖拽，不触发点击事件
				if (this.isDragging) return;
				
				uni.navigateTo({
					url: `/packageStudy/study/tertiary-list?category=${encodeURIComponent(item.category || '')}&subcategory=${encodeURIComponent(item.subcategory || '')}`
				});
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F8F8F8;
	}
	
	/* 头部样式 */
	.header {
		background: linear-gradient(135deg, #1BAE76 0%, #0E8A5A 100%);
		padding: 20rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(27, 174, 118, 0.25);
		position: relative;
	}
	
	.header::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.08);
		backdrop-filter: blur(8rpx);
		pointer-events: none;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 25rpx;
		padding: 0 20rpx;
		height: 70rpx;
		backdrop-filter: blur(10rpx);
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		position: relative;
		z-index: 1;
	}
	
	.search-icon {
		margin-right: 10rpx;
		color: #666;
	}
	
	.search-input {
		flex: 1;
		height: 70rpx;
		font-size: 28rpx;
		background: transparent;
	}
	
	.clear-btn {
		font-size: 24rpx;
		color: #999999;
		padding: 0 10rpx;
	}
	
	.search-btn {
		font-size: 28rpx;
		color: #1BAE76;
		padding-left: 20rpx;
		font-weight: 500;
	}
	
	/* 搜索结果提示 */
	.search-result-tip {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 30rpx;
		background: linear-gradient(135deg, #F0F9F5 0%, #E8F5E8 100%);
		font-size: 24rpx;
		color: #666666;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}
	
	.back-btn {
		color: #1BAE76;
		font-size: 24rpx;
		font-weight: 500;
	}
	
	/* 页面标题 */
	.page-title {
		background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #EEEEEE;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
	}
	
	.title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.subtitle-text {
		font-size: 24rpx;
		color: #666666;
	}
	
	/* 内容区域样式 */
	.scroll-view {
		flex: 1;
	}
	
	/* 分类选择样式 */
	.category-scroll {
		width: 100%;
		white-space: nowrap;
		background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}
	
	.category-list {
		display: flex;
		padding: 0 20rpx;
		gap: 12rpx;
	}
	
	.category-item {
		display: inline-block;
		padding: 12rpx 24rpx;
		font-size: 26rpx;
		color: #666666;
		border-radius: 20rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		border: 1rpx solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		white-space: nowrap;
	}
	
	.category-item.active {
		background: linear-gradient(135deg, #1BAE76 0%, #0E8A5A 100%);
		color: #FFFFFF;
		border: 1rpx solid rgba(27, 174, 118, 0.3);
		box-shadow: 0 4rpx 12rpx rgba(27, 174, 118, 0.3);
		transform: translateY(-1rpx);
	}
	
	/* 规则列表样式 */
	.rule-list {
		padding: 20rpx;
	}
	
	.rule-item {
		margin-bottom: 30rpx;
		background: linear-gradient(135deg, #1BAE76 0%, #0E8A5A 100%); /* 默认渐变背景，会被内联样式覆盖 */
		border-radius: 24rpx;
		padding: 0;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12), 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		backdrop-filter: blur(10rpx);
	}
	
	.rule-item:active {
		transform: scale(0.98);
	}
	
	.rule-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(8rpx);
		pointer-events: none;
	}
	
	/* 拖拽状态样式 */
	.rule-item.is-dragging {
		opacity: 0.9;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2), 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
	}
	
	.rule-content {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		padding: 30rpx;
	}
	
	.rule-icon {
		font-size: 48rpx;
		margin-right: 20rpx;
		opacity: 0.9;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}
	
	.rule-text {
		flex: 1;
	}
	
	.rule-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 12rpx;
		display: block;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}
	
	.rule-meta {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}
	
	.rule-count {
		font-size: 24rpx;
		color: #FFFFFF;
		background: rgba(255, 255, 255, 0.25);
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		backdrop-filter: blur(4rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}
	
	.rule-views {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.85);
		margin-left: auto;
	}
	
	/* 空数据提示 */
	.empty-tip {
		text-align: center;
		padding: 100rpx 0;
		color: #999999;
		font-size: 28rpx;
	}
</style> 